<!--人资管理-人员信息-->
<template>
  <PageTemplate>
    <div class="plan-list" slot="content">
      <el-form
        inline
        :model="query"
        ref="query"
        label-position="right"
        label-width="110px"
        class="search-collapse-pro-form"
      >
        <SearchCollapsePro :isAdvSearch="false">
          <div slot="title" class="search-collapse-pro-title">
            <el-form-item label-width="0px">
              <el-input v-model="query.searchKey" placeholder="员工号/姓名">
                <el-button slot="append" icon="el-icon-search" @click="queryDataTableLike"></el-button>
              </el-input>
            </el-form-item>
          </div>
        </SearchCollapsePro>
      </el-form>
      <el-row class="row-empty-20"></el-row>
      <PageTableCollapse :collapseStatus="true">
        <el-row slot="title">
          <el-col>
            <div>
              <el-button v-if="showBtn" icon="el-icon-edit" type="primary" @click="addHandle">
                 新增
              </el-button>
              <el-button v-if="showBtn" icon="el-icon-upload2" type="primary" @click="importHandle">
                 导入
              </el-button>
              <el-button v-if="showBtn" icon="el-icon-download" type="primary" @click="exportHandle">
                 导出
              </el-button>
              <el-button v-if="showBtn" icon="el-icon-delete" type="primary" @click="delHandle">
                 删除
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-table
          class="table"
          border
          ref="multipleTable"
          :data="tables"
          tooltip-effect="dark"
          style="width: 100%"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:tableHeaderBGC}"
        >
          <el-table-column align="center" type="selection" width="60"></el-table-column>
          <el-table-column type="index" :index="indexMethod" :label="$t('cm.no')" align="center" width="60"></el-table-column>
          <el-table-column prop="userNo" label="员工号" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="sex" label="性别" align="center"></el-table-column>
          <!-- <el-table-column 
            prop="sex" label="性别" align="center"
              :formatter="(row)=>{
              let result = '';
              switch (row.sex-0) {
                case 1:
                  result = '男';
                  break;
                case 2:
                  result = '女';
                  break;
              }
              return result;
           }"></el-table-column> -->
          <el-table-column prop="backendDepartment" label="后台所属模块/分部/所" align="center"></el-table-column>
          <el-table-column prop="backendNo" label="后台岗位编号" align="center"></el-table-column>
          <el-table-column prop="backendName" label="后台岗位名称" align="center"></el-table-column>
          <el-table-column prop="frontendProject" label="前台所属项目部" align="center"></el-table-column>
          <el-table-column prop="frontendDepartment" label="前台所属分部" align="center"></el-table-column>
          <el-table-column prop="frontendQueue" label="前台所属队" align="center"></el-table-column>
          <el-table-column prop="frontendNo" label="前台岗位编号" align="center"></el-table-column>
          <el-table-column prop="frontendName" label="前台岗位名称" align="center"></el-table-column>
          <el-table-column prop="workAddress" label="现工作地" align="center"></el-table-column>
          <el-table-column :label="$t('cm.operate')" prop="statussss" align="center" width="150" fixed="right">
            <template slot-scope="scope">
              <ListBtn 
                  :options="btns" 
                  :row-data="scope.row" 
                  @triggerListBtn="handleListBtn"
                  :show-btn="showBtn">
              </ListBtn>
            </template>
          </el-table-column>
        </el-table>
        <div class="block pager-customer">
          <el-pagination
            background
            layout="total,prev,pager, next,jumper"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
          </el-pagination>
        </div>
      </PageTableCollapse>

      <!-- 导入 -->
      <el-dialog :visible.sync="dialogImportVisible" width="732px">
        <div slot="title" class="dialog-edit-head">
          <i>导入</i>
        </div>
        <el-form label-width="120px">
          <el-row>
            <div style="text-align: center; margin-bottom: 10px;">
              <a @click="downCardTemplate" style="cursor: pointer;">模板下载</a>
            </div>
          </el-row>
          <el-row>
            <el-col :span="24" style="text-align:center;">
              <div>
                <el-upload
                  class="upload-demo"
                  drag
                  :http-request="uploadCardTemplate"
                  action
                  ref="cardupload"
                  :on-remove="handleTemplateRemove"
                  :on-success="handleTemplateSuccess"
                  :before-upload="beforeTemplateUpload"
                  :on-progress="handleTemplateProgress"
                  name="file"
                  :file-list="fileList"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                </el-upload>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogImportVisible = false">取 消</el-button>
        </div>
      </el-dialog>



    </div>
  </PageTemplate>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import PageTemplate from '@/components/common/PageTemplate'
import PageTableCollapse from '@/components/common/PageTableCollapse'
import SearchCollapsePro from '@/components/common/SearchCollapsePro'
import ListBtn from '@/components/btn/ListBtn'
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import {COMMON} from '@/utils/commonUtil'
import Pagination from '@/mixins/Pagination'
import HasBtn from '@/mixins/HasBtn'
import api_hr from '@/api/api_hr'
import {dateFtt} from '@/utils/datetime'

export default {
  components: { 
    PageTemplate, 
    PageTableCollapse, 
    SearchCollapsePro, 
    ListBtn 
  },
  data () {
    return {
      query: {
       searchKey:null
      },
      tables:[],
     btns: [
      {
        value: 'look',
        label: 'cm.look'
      },
      {
        value: 'edit',
        label: 'cm.edit'
      },
      {
        value: 'delete',
        label: 'cm.delete'
      }
    ],
    selectData:[],
    dialogImportVisible:false,
    fileList:[],
    
    }
  },
  created () {
    this.getAllDataTable();
  },
  mixins: [Pagination, HasBtn],
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    })
  },
  methods:{
    handleListBtn({btn,row}){
      if(btn==="look"){//编辑
        COMMON.routerTo(Constant.ROUTE_HR_POSITION_LOOK.index, this.$router, { id: row.id })
      }else if(btn==="edit"){//编辑
        COMMON.routerTo(Constant.ROUTE_HR_POSITION_EDIT.index, this.$router, { id: row.id })
      }else{//删除
        this.delPost([row.id]);
      }
    },
    //删除请求
    delPost(delIds){
      COMMON.confirm({}, () => {
        api_hr.hrUserInfoDel(delIds, result => {
          if (result.code === Constant.RT_SUCCESS) {
            this.getAllDataTable()
            ALERT.success(result.msg)
          } else {
            ALERT.error(result.msg)
          }
        })
      })
    },
    //重置操作
    queryReset (formName) {
      this.$refs[formName].resetFields()
    },
    //新增
    addHandle (){
      COMMON.routerTo(Constant.ROUTE_HR_POSITION_ADD.index, this.$router)
       
    },
    // 导入
    importHandle (){
       this.dialogImportVisible = true
    },
    //下载模板
    downCardTemplate () {
      COMMON.downloadLinkByUrl('./static/xlsx/template_excel_import_hrPositionList.xlsx', '人资管理-人员列表导入模板hh.xlsx')
    },
     uploadCardTemplate (fileObj) {
      const formData = new FormData()
      formData.append('file', fileObj.file)
      api_hr.hrUserInfoImportFromExcel(formData, response => {
        if (response.code === Constant.RT_SUCCESS) {
          fileObj.onProgress({ percent: 100 })
          setTimeout(() => {
            fileObj.onSuccess(response, fileObj)
            this.getAllDataTable()
          }, 200)
        } else {
          ALERT.errorDefault(response)
        }
        this.fileList = []
        COMMON.hideLoading()
      })
    },
    beforeTemplateUpload (file) {
      let fileType = file.name.split('.').pop()
      const isXLSX = fileType === 'xlsx' || fileType === 'xls'
      if (!isXLSX) {
        this.$message.warning('导入模板文件类型不正确，请下载模板进行修改')
        return false
      }
      return true
    },
    handleTemplateRemove (file, fileList) {
      this.fileList = fileList
    },
    handleTemplateSuccess (res, option) {
      ALERT.success('导入成功！')
      this.fileList = []
      this.getAllDataTable();
    },
    handleTemplateProgress (event, file, fileList) {
      if (event.percent === 100) {
        this.dialogImportVisible = false
        COMMON.showLoading('正在导入中...')
      }
    },

    // 导出
    exportHandle () {
       let params = Object.assign({},this.query,{
        pageNum:this.pagingCurrentPageNum,
        pageSize:this.pagingPageSize
      })
      let fileName = `调试人资管理_人员岗位列表_${dateFtt('yyyy-MM-dd', new Date())}`
      api_hr.hrUserInfoExportExcel(params, response => {
        if (response.code === Constant.RT_SUCCESS) {
          COMMON.downloadLinkByUrl(response.data.webRequestUrl, fileName)
        } else {
          ALERT.alertResp(response)
        }
      })
    },
    //删除
    delHandle(){
      let ids = this.selectData.map(item => item.id);
      //删除请求
      this.delPost(ids)
    },
    //选择
    handleSelectionChange(rows){
      this.selectData = rows;

    },
    queryDataTableLike () {
      this.getAllDataTable();
    },
     getAllDataTable () {
      this.queryTableList({
        ...this.query,
        pageNum: this.pagingCurrentPageNum,
        pageSize: this.pagingPageSize
      })
    },
    //统一与后台操作的方法
    queryTableList (params) {
      //这里的params是对象
      //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
      let _this = this
      let tables = []
      let totalCount = 0
      api_hr.hrUserInfoList(params, result => {
        if (result.code === Constant.RT_SUCCESS) {
          //表格数据  数组            
          tables = result.data.results
          //分页数据
          totalCount = result.data.totalRows
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.data.msg)
        }
        _this.setPagingTotal(totalCount)
        this.tables = tables
      })
    },
  }
}
  
</script>

<style lang="scss">
  
</style>